<template>
	<div v-if="navMenus.length<=0" style="padding:20px;">
		<el-alert title="无子分类" center type="info" :closable="false"></el-alert>
	</div>
	<template v-for="navMenu in navMenus" :key="navMenu.itemId">
		<el-menu-item v-if="!hasChildren(navMenu)" :index="navMenu.itemId">
			<template #title>
				<el-icon v-if="navMenu.icon">
					<component :is="navMenu.icon || 'el-icon-menu'"/>
				</el-icon>
				<span>{{ navMenu.name }}</span>
			</template>
		</el-menu-item>
		<el-sub-menu v-else :index="navMenu.itemId">
			<template #title>
				<el-icon v-if="navMenu.icon">
					<component :is="navMenu.icon || 'el-icon-menu'"/>
				</el-icon>
				<span>{{ navMenu.name }}</span>
			</template>
			<chartNavMenu :navMenus="navMenu.children"></chartNavMenu>
		</el-sub-menu>
	</template>
</template>

<script>
export default {
	name: 'chart Nave Menus',
	props: ['navMenus'],
	data() {
		return {}
	},
	methods: {
		hasChildren(item) {
			if (item.children === undefined||item.children === null) {
				return false;
			} else {
				return item.children.length > 0;
			}
		},
	}
}
</script>
<style scoped>
.el-menu-item {
	min-width: 150px;
}
</style>
